<template>
  <div class="pt10 pl10 height100 bt_EBEEF5">
    <div class="DataMaintenance-groupInformation bg-white height100" @click="showMenu = false">
      <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
        <div class="ct-head-left flex-al">
          <span class="left-line-orange mr10"></span>
          <span class="color-333 fs14">{{$t('views.Set.groupInformation.50zhrfr037w0')}}</span>
        </div>
        <div class="cr-head-right">
          <el-button type="primary" size="mini" v-if="showCheck" @click="Check">{{$t('views.Set.groupInformation.50zhrfr04yw0')}}</el-button>
          <el-button type="primary" size="mini" v-if="showEdit" @click="Edit">{{$t('views.Set.groupInformation.50zhrfr05i40')}}</el-button>
        </div>
      </div>
      <div class="pAll12">
        <div class="body">
          <div class="info" v-if="showEdit">
            <el-form label-width="120px" :model="companyData" status-icon ref="editform">
              <el-form-item :label="$t('views.Set.groupInformation.50zhrfr05xw0')" prop="company_code">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr06bs0')" disabled v-model="companyData.company_code"></el-input>
              </el-form-item>

              <el-form-item
                :label="$t('views.Set.groupInformation.50zhhyf77j00')"
                prop="company_cnname"
                :rules="[{ required: true, message: $t('views.Set.groupInformation.50zhsr5hk5s0') }]"
              >
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr06bs0')" disabled v-model="companyData.company_cnname"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a6e00')" prop="company_brief">
                <el-input type="textarea" :placeholder="$t('views.Set.groupInformation.50zhrfr06pc0')" v-model="companyData.company_brief"></el-input>
              </el-form-item>
              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a8080')" prop="company_name">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr071s0')" v-model="companyData.company_name"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a8co0')" prop="company_position">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr07e00')" v-model="companyData.company_position"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a8no0')" prop="company_mobile">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr07rk0')" v-model="companyData.company_mobile"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a8z00')" prop="company_address">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr085c0')" v-model="companyData.company_address"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a9ao0')" prop="company_homeurl">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr08k00')" v-model="companyData.company_homeurl"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a9lw0')" prop="company_fax">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr08yg0')" v-model="companyData.company_fax"></el-input>
              </el-form-item>

              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9a9wc0')" prop="company_email">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr09ao0')" v-model="companyData.company_email"></el-input>
              </el-form-item>
              <el-form-item :label="$t('views.Set.groupInformation.50zhiu9aa800')" prop="saleman_tephone">
                <el-input :placeholder="$t('views.Set.groupInformation.50zhrfr09no0')" disabled v-model="companyData.saleman_tephone"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="info" v-if="showCheck">
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr05xw0')}}</em>
              <span>{{ companyData.company_code }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0a0g0')}}</em>
              <span>{{ companyData.company_cnname }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0ae80')}}</em>
              <span>{{ companyData.company_brief }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0asc0')}}</em>
              <span>{{ companyData.company_name }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0b540')}}</em>
              <span>{{ companyData.company_position }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0bkg0')}}</em>
              <span>{{ companyData.company_mobile }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0c3w0')}}</em>
              <span>{{ companyData.company_address }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0clg0')}}</em>
              <span>{{ companyData.company_homeurl }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0cx00')}}</em>
              <span>{{ companyData.company_fax }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0dbo0')}}</em>
              <span>{{ companyData.company_email }}</span>
            </p>
            <p>
              <em>{{$t('views.Set.groupInformation.50zhrfr0dn80')}}</em>
              <span>{{ companyData.saleman_tephone }}</span>
            </p>
          </div>

          <div class="upload">
            <p class="upload-img__title">{{$t('views.Set.groupInformation.50zhrfr0dy00')}}</p>
            <el-upload
              v-if="!showEdit"
              name="ossfile"
              :show-file-list="false"
              :action="`${$urls.gmcApiUrl}/Uploading/Picture`"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :data="Uploadimg"
              disabled
            >
              <img
                :src="this.companyData.company_logo"
                v-if="this.companyData.company_logo"
                class="img-url"
              />
              <!-- <i class="el-icon-upload"></i> -->
              <div
                class="el-upload__text company-upload"
                v-if="!this.companyData.company_logo"
              >{{$t('views.Set.groupInformation.50zhrfr0e940')}}</div>
            </el-upload>
            <el-upload
              v-if="showEdit"
              name="ossfile"
              :show-file-list="false"
              action="http://gmcapi.kidcastle.org/Uploading/Picture"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :data="Uploadimg"
              drag
            >
              <img :src="company_imgurl" v-if="company_imgurl" class="img-url" />
              <template v-if="!company_imgurl">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  {{$t('views.Set.groupInformation.50zhrfr0ej80')}}
                  <em>{{$t('views.Set.groupInformation.50zhrfr0eu80')}}</em>
                </div>
              </template>
            </el-upload>
            <p class="upload-img__tips">{{$t('views.Set.groupInformation.50zhrfr0f5c0')}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import setHttp from "./Set";
export default {
  name: "DataMaintenance-groupInformation",
  components: {},
  data() {
    return {
      fileList2: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      companyData: {},
      showEdit: false,
      showCheck: true,
      company_imgurl: "",
      Uploadimg: {
        ossfile: "",
        company_id: this.$userDetails.companyId
      }
    };
  },
  created() {
    this.getCompany();
  },
  watch: {},
  methods: {
    getCompany() {
      setHttp.getCompany({}).then(res => {
        if (res.data.error == 0) {
          this.companyData = res.data.result.data[0];
          this.company_imgurl = this.companyData.company_logo;
          console.log(res.data.result.data[0]);
        }
      });
    },
    updateCompanyAction() {
      setHttp
        .updateCompanyAction({
          company_cnname: this.companyData.company_cnname,
          company_brief: this.companyData.company_brief,
          company_code: this.companyData.company_code,
          company_name: this.companyData.company_name,
          company_position: this.companyData.company_position,
          company_mobile: this.companyData.company_mobile,
          company_address: this.companyData.company_address,
          company_homeurl: this.companyData.company_homeurl,
          company_fax: this.companyData.company_fax,
          company_email: this.companyData.company_email,
          company_phone: this.companyData.saleman_tephone,
          company_logo: this.company_imgurl
        })
        .then(res => {
          if (res.data.error == 0) {
            (this.showEdit = false), (this.showCheck = true), this.getCompany();
            this.$message({ message: res.data.errortip, type: "success" });
            this.$Tool.setStorage("COMPANY_LOGO", this.company_imgurl);
            this.$store.dispatch("setCompany_Logo", this.company_imgurl);
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 显示查看
    Check() {
      this.showEdit = true;
      this.showCheck = false;
    },

    // 显示编辑
    Edit() {
      this.updateCompanyAction();
    },
    handleAvatarSuccess(res, file) {
      console.log(file, "12345");
      if (res.error == "0") {
        console.log(res);
        this.company_imgurl = res.result.picture_imgurl;
      }
    },
    beforeAvatarUpload(file) {
      console.log(file, this.$t('views.Set.groupInformation.50zhrfr0fgk0'));
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isGIF = file.type === "image/gif";
      const isImg = isJPG || isPNG || isGIF;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error(this.$t('views.Set.groupInformation.add1'));
      }
      if (!isLt2M) {
        this.$message.error(this.$t('views.Set.groupInformation.add2'));
      }
      return isImg && isLt2M;
    }
  },
  mounted() {}
};
</script>

<style lang="less">
.DataMaintenance-groupInformation {
  .content-box {
    flex: 1;
    margin-right: 10px;
    padding: 36px 16px;
  }

  .body {
    font-size: 14px;
    background-color: #fff;
    display: flex;
    .info {
      width: 600px;
      p {
        // width: 347px;
        margin-left: 20px;
        margin-bottom: 30px;
        color: #55606e;
        display: flex;
        em {
          width: 100px;
          color: #aaa;
          font-style: normal;
        }
        span {
          flex: 1;
          color: #333;
        }
      }
    }
    .upload {
      width: 220px;
      height: 220px;
      margin-left: 20px;
      .upload-img__title {
        margin-bottom: 15px;
        font-size: 18px;
        color: #333;
      }
      .el-upload-dragger,
      .el-upload {
        width: 220px;
        height: 220px;
        // margin-top: 10px;
        background-color: #f4f5f7;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-icon-upload {
          margin-top: 60px;
          font-size: 40px;
          color: #aaaaaa;
        }
        .el-upload__text {
          color: #aaaaaa;
          em {
            color: #00b0ff;
          }
        }
        .img-url {
          // width: 100%;
          // position: absolute;
          // left: 0;
          // top: 0;
          max-width: 100%;
          max-height: 100%;
          z-index: 2;
        }
      }
      .upload-img__tips {
        width: 220px;
        margin-top: 10px;
        color: #aaa;
        font-size: 10px;
        text-align: center;
      }
      .company-upload {
        width: 120%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }
  }
}
.DataMaintenance-groupInformation .body .upload .el-upload-dragger,
.DataMaintenance-groupInformation .body .upload .el-upload {
  width: 300px !important;
  height: 150px !important;
  padding: 10px;
  padding-right: 15px;
}
</style>
